<!DOCTYPE html>
<html>
<head>
    <title>雷达图Demos</title>
    <style type="text/css">
        * {
            border: 0;
            margin: 0;
            padding: 0;
        }
        ::-webkit-scrollbar-thumb {
            height: 5px;
            border: 1px solid transparent;
            border-top: none;
            border-bottom: none;
            -webkit-border-radius: 6px;
            background-color: rgba(0,0,0,.3);
            background-clip: padding-box;
        }
        pre code::-webkit-scrollbar, pre::-webkit-scrollbar {
            width: 5px!important;
            height: 5px!important;
            -webkit-appearance: none;
        }
        body {
            font-size: 16px;
            font-family: PT Sans, DejaVu Sans, Arial, sans;
        }
        pre code {
            overflow-x: auto;
            border-radius: 4px;
            padding: 10px;
            margin-top: -20px;
            line-height: 1.4;
            word-wrap: normal;
            display: block;
            font-size: 14px;
            background: #f9f9f9;
            color: #333;
            font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
        }
        .radar {
            height: 200px;
        }
        .row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 20px;
            border-bottom: 1px solid #ccc;
        }
        .row .radar {
            width: 300px;
            min-width: 300px;
            margin-right: 20px;
        }
        .row .code {
            flex: 1;
            overflow: hidden;
        }

        #radar0 {
            background-color: #5B5C5F;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="radarChart.css">
</head>
<body>
<div class="row">
    <div id="radar0" class="radar"></div>
    <div class="code">
        <pre>
            <code>
radarChart.init(document.querySelector("#radar0"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 200],
        value: [80, 50, 30, 50, 100, 68],
        description: ["JavaScript", "Java", "CSS", "Python", "Three.js", "Canvas"]
    },
    config: {
        scale: 0.5,
        dataFill: {
            fillStyle: "rgba(24, 236, 111, .4)"
        },
        bg: {
            layer: 4,
            evenFillStyle: "#828282",
            oddFillStyle: "#828282",
            evenStrokeStyle: "#ccc",
            oddStrokeStyle: "#ccc"
        },
        dataCircle: {
            r: 1,
            strokeStyle: "#18ec6f",
            fillStyle: "#18ec6f",
            lineWidth: 0.5
        },
        dataLine: {
            strokeStyle: "#18ec6f",
            lineWidth: 2
        },
        font: {
            fontColor: "#eee"
        }
    }
});
            </code>
        </pre>
    </div>
</div>

<div class="row">
    <div id="radar1" class="radar"></div>
    <div class="code">
        <pre>
            <code>
radarChart.init(document.querySelector("#radar1"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 200],
        value: [80, 50, 30, 50, 100, 22],
        description: ["第一名", "第二名", "第三名", "第四名", "第五名", "第六名"],
        tooltipsString: function(description, value, maxVlaue) {
            return "排名：" + description + "<br>" + "分数：" + value + "<br>" + "最高分： " + maxVlaue;
        }
    },
    config: {
        scale: 0.6,
        dataFill: {
            fillStyle: "#6fb08a"
        }
    }
});
            </code>
        </pre>
    </div>
</div>
<div class="row">
    <div id="radar2" class="radar"></div>
    <div class="code">
        <pre>
            <code>
radarChart.init(document.querySelector("#radar2"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 100, 300],
        value: [30, 20, 40, 70, 100, 60, 250],
        description: ["苹果", "香蕉", "番茄", "樱桃", "番石榴", "水蜜桃", "梨子"]
    },
    config: {
        showTooltip: false,
        scale: 1,
        dataLine: {
            strokeStyle: "yellow",
            lineWidth: 3
        },
        dataCircle: {
            r: 7,
            strokeStyle: "yellow",
            fillStyle: "#eee",
            lineWidth: 7
        },
        bg: {
            layer: 9,
            evenFillStyle: "#fefefe",
            oddFillStyle: "#ddd",
            evenStrokeStyle: "#999",
            oddStrokeStyle: "#999"
        }
    }
});
            </code>
        </pre>
    </div>
</div>
<div class="row">
    <div id="radar3" class="radar"></div>
    <div class="code">
        <pre>
            <code>
radarChart.init(document.querySelector("#radar3"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 100, 300, 400],
        value: [30, 20, 40, 70, 100, 60, 250, 400],
        description: ["苹果", "香蕉", "番茄", "樱桃", "番石榴", "水蜜桃", "梨子", "柠檬"]
    },
    config: {
        scale: 1
    }
});
            </code>
        </pre>
    </div>
</div>
<div class="row">
    <div id="radar4" class="radar"></div>
    <div class="code">
        <pre>
            <code>
radarChart.init(document.querySelector("#radar4"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 200],
        value: [80, 50, 30, 50, 100, 22],
        description: ["第一名", "第二名", "第三名", "第四名", "第五名", "第六名"],
        tooltipsString: function(description, value, maxVlaue) {
            return "排名：" + description + "<br>" + "分数：" + value + "<br>" + "最高分： " + maxVlaue;
        }
    },
    config: {
        scale: 0.6,
        dataFill: {
            fillStyle: "#6fb08a"
        }
    }
});
            </code>
        </pre>
    </div>
</div>
<script type="text/javascript" src="radarChart.js"></script>
<script type="text/javascript">
radarChart.init(document.querySelector("#radar0"), {
    data: {
        maxValue: [100, 100, 100, 100, 100],
        value: [100, 80, 70, 50, 100],
        description: ["JavaScript", "Java", "CSS", "Python", "Three.js"]
    },
    config: {
        scale: 0.8,
        dataFill: {
            fillStyle: "rgba(24, 236, 111, .4)"
        },
        bg: {
            layer: 4,
            evenFillStyle: "#828282",
            oddFillStyle: "#828282",
            evenStrokeStyle: "#ccc",
            oddStrokeStyle: "#ccc"
        },
        dataCircle: {
            r: 1,
            strokeStyle: "#18ec6f",
            fillStyle: "#18ec6f",
            lineWidth: 0.5
        },
        dataLine: {
            strokeStyle: "#18ec6f",
            lineWidth: 2
        },
        font: {
            fontColor: "#eee"
        }
    }
});

radarChart.init(document.querySelector("#radar1"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 200],
        value: [80, 50, 30, 50, 100, 68],
        description: ["JavaScript", "Java", "CSS", "Python", "Three.js", "Canvas"]
    },
    config: {
        scale: 0.8,
        dataFill: {
            fillStyle: "rgba(24, 236, 111, .4)"
        },
        bg: {
            layer: 4,
            evenFillStyle: "transparent",
            oddFillStyle: "transparent",
            evenStrokeStyle: "#dedede",
            oddStrokeStyle: "#dedede"
        },
        dataCircle: {
            r: 1,
            strokeStyle: "#18ec6f",
            fillStyle: "#18ec6f",
            lineWidth: 0.5
        },
        dataLine: {
            strokeStyle: "#18ec6f",
            lineWidth: 2
        },
        font: {
            fontColor: "#333"
        }
    }
});

radarChart.init(document.querySelector("#radar2"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 100, 300],
        value: [30, 20, 40, 70, 100, 60, 250],
        description: ["苹果", "香蕉", "番茄", "樱桃", "番石榴", "水蜜桃", "梨子"]
    },
    config: {
        scale: 1,
        showTooltip: true,
        dataLine: {
            strokeStyle: "yellow",
            lineWidth: 2
        },
        dataCircle: {
            r: 4,
            strokeStyle: "yellow",
            fillStyle: "#eee",
            lineWidth: 4
        },
        bg: {
            layer: 9,
            evenFillStyle: "#fefefe",
            oddFillStyle: "#ddd",
            evenStrokeStyle: "#999",
            oddStrokeStyle: "#999"
        }
    }
});

radarChart.init(document.querySelector("#radar3"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 100, 300, 400],
        value: [30, 20, 40, 70, 100, 60, 250, 400],
        description: ["苹果", "香蕉", "番茄", "樱桃", "番石榴", "水蜜桃", "梨子", "柠檬"]
    },
    config: {
        scale: 1
    }
});

radarChart.init(document.querySelector("#radar4"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 200],
        value: [80, 50, 30, 50, 100, 22],
        description: ["第一名", "第二名", "第三名", "第四名", "第五名", "第六名"],
        tooltipsString: function(description, value, maxVlaue) {
            return "排名：" + description + "<br>" + "分数：" + value + "<br>" + "最高分： " + maxVlaue;
        }
    },
    config: {
        scale: 0.6,
        dataFill: {
            fillStyle: "#6fb08a"
        }
    }
});
</script>


<!-- 代码高亮 -->
<!-- <link rel="stylesheet" href="http://www.dengzhr.com/wp-content/themes/dengzhr/css/monokai_sublime.css"> -->
<!-- <script src="http://www.dengzhr.com/wp-content/themes/dengzhr/js/highlight.pack.js"></script> -->
<!-- <script>hljs.initHighlightingOnLoad();</script> -->
</body>
</html>